<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>html5 canvas demo (example) -- zswang 2010</title>
		<style type="text/css">
			#divTools{
				position:absolute;
				left:10px;
				top:10px;
				height:27px;
			}
			#divCanvas{
				position:absolute;
				left:10px;
				top:40px;
				border:solid red 1px;
			}
			#divCode{
				position:absolute;
				left:415px;
				top:40px;
				height:400px;
				width:400px;
				border:dotted blue 1px;
			}
			#preCode{
				padding:0;
				margin:0;
			}
		</style>
		<!--script src="../common/class-helper.js"></script-->
	</head>
	<body>
		<div id="divTools"></div>
		<div id="divCanvas"><canvas id="canvas" width="400" height="400"></canvas></div>
		<div id="divCode"><pre id="preCode"></pre></div>
		<script>
			var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"),
				divTools = document.getElementById("divTools"),
				preCode = document.getElementById("preCode"),
				canvasMemory = document.createElement("canvas"), contextMemory = canvasMemory.getContext("2d");
			canvasMemory.width = canvas.width;
			canvasMemory.height = canvas.height;
			/**
			 * 添加测试代码
			 * @param {String} text 测试主题
			 * @param {Function} func 执行函数
			 */
			function addCase(text, func) {
				var button = document.createElement("input");
				button.type = "button";
				button.value = text;
				button.onclick = function(){
					context.save();
					func();
					context.restore();
				};
				button.onmouseover = function(){
					preCode.innerHTML = ("" + func).replace(/[<>&]/g, function(all) {
						return { "<": "&lt;", ">": "&gt;", "&": "&amp;" }[all];
					});
				};
				divTools.appendChild(button);
			}
			
			addCase("清除画布", function() {
				context.clearRect(0, 0, canvas.width, canvas.height);
			});
			
			addCase("完整贴图", function() {
				context.drawImage(imageList.items[parseInt(Math.random() * 5)], 0, 0);
			});
			
			addCase("局部贴图", function() {
				context.drawImage(imageList.items[parseInt(Math.random() * 5)], 100, 100, 50, 50, 105, 105, 50, 50);
			});

			addCase("png贴图", function() {
				context.drawImage(imageList.items[5], 50, 50);
			});

			addCase("缩放贴图", function() {
				context.drawImage(imageList.items[5], 0, 0, 128, 128, 20, 20, 64, 64);
				context.drawImage(imageList.items[5], 0, 0, 128, 128, 100, 100, 256, 256);
			});
			
			addCase("像素处理", function() {
				var imageData = context.getImageData(0, 0, canvas.width, canvas.height),
					pixels = imageData.data, i, color, l = pixels.length;
				for (i = 0; i < l; i += 4) {
					color =
						pixels[i + 0] * 0.30 +
						pixels[i + 1] * 0.59 + 
						pixels[i + 2] * 0.11;
			  		pixels[i + 0] = color; // red
			  		pixels[i + 1] = color; // green
			  		pixels[i + 2] = color; // blue
			  		// pixels[i + 3] is alpha
				}
				context.putImageData(imageData, 0, 0);
			});
			
			addCase("贴Canvas", function() {
				context.drawImage(imageList.items[parseInt(Math.random() * 5)], 0, 0);
				var imageData = context.getImageData(0, 0, canvas.width, canvas.height),
					pixels = imageData.data, i, color, l = pixels.length;
				for (i = 0; i < l; i += 4) {
					color =
						pixels[i + 0] * 0.30 +
						pixels[i + 1] * 0.59 + 
						pixels[i + 2] * 0.11;
			  		pixels[i + 0] = color; // red
			  		pixels[i + 1] = color; // green
			  		pixels[i + 2] = color; // blue
			  		// pixels[i + 3] is alpha
				}
				context.beginPath();
				context.rect(50, 50, 100, 100);
				context.rect(120, 170, 100, 100);
				context.stroke();
				context.clip();
				contextMemory.putImageData(imageData, 0, 0);
				context.drawImage(canvasMemory, 0, 0);
			});

			addCase("动画效果", function() {
				if (window.__timer) {
					clearInterval(window.__timer);
					window.__timer = 0;
					return;
				}
				context.drawImage(imageList.items[0], 0, 0);
				var angle = 0, count = 36, index = 0, next = 1;
				window.__timer = setInterval(function() {
						context.save();
						context.beginPath();
						context.moveTo(canvas.width / 2, canvas.height / 2);
						context.arc(canvas.width / 2, canvas.height / 2, 400, 0, (angle / count) * 2 * Math.PI, false);
						context.closePath();
						context.clip();
						context.drawImage(imageList.items[next], 0, 0);
						context.restore();
						angle++;
						if (angle > count) {
							index = next;
							next = (next + 1) % 5;
							angle = 0;
						}
					}, 100);
			});

			function ImageList(url, path) {
				if (!(url instanceof Array)) url = [url];
				path = path || "";
				for (var i = 0; i < url.length; i++) {
					this.add(i, path + url[i]);
				}
			};
			ImageList.prototype = {
				items: {},
				count: 0,
				loadCount: 0,
				errorCount: 0,
				add: function(key, url) {
					if (!url || this.items[key]) return;
					var self = this, image = new Image();
					self.count++;
					image.onload = function() {
						image.loading = false;
						image.loaded = true;
						self.loadCount++;
						if (self.onload) self.onload(image);
						if (self <= self.loadCount && self.onallload) self.onallload(); // 全部加载完毕
					};
					image.onerror = function() {
						self.errorCount++;
						image.loading = false;
						image.error = true;
						if (self.onerror) self.onerror(image);
					};
					image.key = key;
					image.loading = true;
					image.src = url;
					this.items[key] = image;
				}
			};
			var imageList = new ImageList([
				"beibei.jpg", "jingjing.jpg", 
				"huanhuan.jpg", "yingying.jpg", 
				"nini.jpg", "anguille.png"], "../resource/");
		</script>
	</body>
</html>